<template>
	<view class="page">
		<view class="search-box">
			<!-- <view class="">
				<input type="text" class="tel-box" v-model="tel_num" placeholder="请输入客户手机号" />
			</view> -->
			<view class="search-time">
				<input type="text" class="tel-box" v-model="tel_num" placeholder="请输入客户手机号" />
				<view class="search-btn" @click="clearSearch">重置</view>
			</view>
			<view class="search-time">
				<view class="time-box">
					<view class="">创建时间</view>
					<view class="uni-list-cell-db box-date">
						<picker mode="date" :value="date1"  :end="date2" @change="bindDateChange1">
					         <view class="uni-input">{{date1}}</view>
					     </picker>
						 <image src="../../static/images/rili.png" class="rili"></image>
					 </view>  
					<view class="">至</view>
					<view class="uni-list-cell-db box-date">
						<picker mode="date" :value="date2" :start="date1" @change="bindDateChange2">
					         <view class="uni-input">{{date2}}</view>
					     </picker>
						 <image src="../../static/images/rili.png" class="rili"></image>
					 </view> 
				</view>
				<view class="search-btn" @click="searchList">搜索</view>
			</view>
		</view>
		<view class="menu-list">
			<view :class="{'active':active==0}" @click="setActive(0)">全部</view>
			<view :class="{'active':active==1}" @click="setActive(1)">待接单</view>
			<view :class="{'active':active==2}" @click="setActive(2)">接待中</view>
			<view :class="{'active':active==3}" @click="setActive(3)">已完成</view>
			<view v-if="identity=='reportor'" :class="{'active':active==4}" @click="setActive(4)">已失效</view>
		</view>
		<view class="list" v-for="(item,key) in report_list" :key="key" @click="goReportDetail(item.id)">
			<view class="tit bigft">
				<view class="bigftt">接单状态：</view>
				<view class="bigftt">{{item.status}}</view>
			</view>
			<view class="time">{{item.report_time}}</view>
			<view class="">客户手姓名：{{item.customer_name}}</view>
			<view class="">客户手机号：{{item.customer_mobile ? item.customer_mobile :'-'}}</view>
			
			<view class="tit mrt">接待信息</view>
			<view class="">接待员：{{item.receiver_name ? item.receiver_name :'暂无接待员'}}</view>
			<!-- <view class="">接待员：{{item.status=='待接单' ? '暂无接待员' : item.receiver_name}}</view> -->
			<view class="btn-box">
				<button class="chakan">查看订单</button>
			</view>
		</view>
		<view class="no_msg" v-if="show_no_data">
			<image class="no_msg_img" src="../../static/images/nomsg1.png" mode="widthFix"></image>
		</view>
		<view v-if="identity=='reportor'" class="add" @click="goAdd">
			<image class="add-port" src="../../static/images/add-port.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			var self = this;
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				date:currentDate,
				date1:'',
				date2:'',
				active:0,
				user_id:0,
				tel_num:'',
				p:1,
				per:10,
				is_bottom:false,
				show_no_data:false,
				identity:'',
				report_list:[]
			}
		},
		onLoad(e) {
			this.user_id = e.id;
			this.identity = e.identity;
			this.getList();
		},
		 computed: {
		        startDate() {
		            return this.getDate('start');
		        }
		    },
		methods: {
			 bindDateChange1: function(e) {
			            this.date1 = e.target.value
			 },
			 bindDateChange2: function(e) {
			            this.date2 = e.target.value
			 },
			 setActive(num){
				 this.active = num;
				 this.p=1;
				 this.report_list=[];
				 this.getList();
			 },
			 clearSearch(){
				 this.tel_num="";
				 this.date1="";
				 this.date2="";
				 this.p=1;
				 this.report_list=[];
				 this.getList();
			 },
			 searchList(){
				 this.report_list=[];
				 this.getList();
			 },
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 0;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			},
			goAdd(){
				uni.navigateTo({
				    url: '../add-report/add-report?id='+this.user_id
				});
			},
			goReportDetail(id){
				uni.navigateTo({
				    url: '../report-detail/report-detail?id='+id+'&user_id='+this.user_id+'&identity='+this.identity
				});
			},
			onReachBottom(){
				console.log('bottom')
				if(this.is_bottom) return;
				this.is_bottom = true;
				this.p++;
				this.getList();
			},
			getList(){
				var self = this;
				if((self.date1&&!self.date2) || (!self.date1&&self.date2)){
					uni.showToast({
						title:'开始时间和结束时间必须同时选择',
						icon:"none",
						duration:2000
					})
					return false;
				}
				uni.showLoading({
				    title: '加载中'
				});
				var data={
					identity:self.identity,
					status:self.active,
					customer_mobile:self.tel_num,
					begin_time:self.date1 ? self.date1+' 00:00:00' : "",
					end_time:self.date2 ? self.date2+' 23:59:59' :'',
					p:self.p,
					per:self.per
				}
				console.log(data)
				self.$request.request({
					url:'/report/list',
					data:data,
					success:function(res){
						if(res.code==200){
							uni.hideLoading();
							var  y = res.result;
							console.log(y)
							
							y.forEach((item,index)=>{
								if(item.customer_mobile){
									y[index].customer_mobile = item.customer_mobile.substr(0,3) + "****" + item.customer_mobile.substr(7)
								}
							})
							self.report_list =self.report_list.concat(y);
							if(self.report_list.length==0){
								self.show_no_data = true
							}else{
								self.show_no_data = false
							}
							setTimeout(function(){
								self.is_bottom = false;
							},500)
						}else{
							
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
.page{
	width: 100%;
	min-height: 100vh;
	background-color: #f6f6f6;
}
.search-box{
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 20upx;
}
.search-time{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	margin-top: 20upx;
}
.time-box{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	font-size: 12px;
}
.tel-box{
	width: 495upx;
	height: 60upx;
	box-sizing: border-box;
	border: 1px solid #e6e6e6;
	background-color: #f7f7f7;
	border-radius: 10upx;
	padding-left: 10upx;
	font-size: 12px;
}
.uni-input{
	box-sizing: border-box;
	width: 202upx;
	padding: 0 15upx;
	background-color: #f7f7f7;
	border-radius: 25upx;
}
.search-btn{
	padding: 5upx 40upx;
	background-color: #f7f7f7;
	border-radius: 5upx;
}
.menu-list{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	margin-top: 10upx;
}
.active{
	color: #859dc2;
	border-bottom: 1px solid #859dc2;
	font-weight: bold;
}
.list{
	width: 650upx;
	background-color: #FFFFFF;
	font-size: 12px;
	box-sizing: border-box;
	padding: 20upx;
	margin: 40upx auto 0 auto;
	border-radius: 20upx;
	box-shadow: 0 0 5px #d0d0d0;;
}

.staus{
	color: #fe8f8f;
}
.tit{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-weight: bold;
}
.add{
	position: fixed;
	width: 150upx;
	height: 150upx;
	border-radius: 150upx;
	right: 40upx;
	bottom: 100upx;
}
.add-port{
	width: 150upx;
	height: 150upx;
	border-radius: 150upx;
}
.no_msg{
	text-align: center;
	margin-top: 40upx;
}
.no_msg_img{
	width: 500upx;
}
.box-date{
	position: relative;
}
.rili{
	position: absolute;
	width: 28upx;
	height: 28upx;
	left: 10upx;
	top:10upx
}
.uni-input{
	box-sizing: border-box;
	padding-left: 38upx;
	font-size: 12px;
}
.bigft{
	font-size: 15px;
	border-bottom: 1px solid #C0C0C0;
	padding-bottom: 10upx;
	margin-bottom: 10upx;
}
.bigftt{
	font-size: 15px;
}
.time{
	font-size: 12px;
	margin-bottom: 10upx;
}
.mrt{
	margin-top: 10upx;
}
.btn-box{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	text-align: right;
}
.chakan{
	width: 165upx;
	height: 60upx;
	line-height: 60upx;
	border-radius: 60upx;
	border: 1px solid #859dc2;
	color: #859dc2;
	font-size: 14px;
	font-weight: bold;
	padding: 0;
	margin: 0;
	background-color: #FFFFFF;
}
</style>
